<template>
	<view>
		<view class="bg-fff pa-20">
			<view class="flex f-between f-center p-b-20">
				<view class="tn-flex tn-flex-col-center width90 i-search">
					<text
						class="tn-icon-search justify-content-item tn-padding-right-xs tn-color-gray tn-text-lg"></text>
					<input class="justify-content-item" placeholder="批发商/门店/帮卖名称" name="input"
						placeholder-style="color:#AAAAAA" style="width: 90%;"></input>
				</view>
				<view @click="show=true" class="tn-icon-filter  tn-padding-right-xs tn-color-gray tn-text-xxls"></view>
			</view>
			<view class="b-t-1-F5">
				<tn-tabs :list="list" :current="current"  @change="change" :isScroll="false"  activeColor="#fbbd12" name="tab_name" backgroundColor="#FFFFFF"  :barWidth="150"></tn-tabs>
			</view>
			
		</view>
		<tn-picker mode="selector" v-model="show" :range="selector"></tn-picker>
		<view class="ma-20 pa-20 bg-fff b-r-15" v-for="(item,index) in 10" :key="index">
			<view class="flex f-center">
				<view class="font-bold">醇香麦芽精酿啤酒‌500ml</view>
				<view :class="index%2===0?'status1 tn-text-sm h50':'status2 tn-text-sm h50'">{{index%2===0?"正式":"在途"}}</view>
			</view>
			<view class="ma-b-20 ma-t-10 c-a8">加入时间：2024-01-25 14:25:42</view>
			<view class="b-t-1-F5 pa-t-20 flex f-center">
				<view class="width50">购买数量：1528</view>
				<view class="width50">获取积分：1528</view>
			</view>
		</view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				list: [{
					tab_name: '批发商'
				}, {
					tab_name: '门店'
				}, {
					tab_name: '帮卖'
				}],
				current:0,
				show:false,
				selector:["全部","正式","在途"]
			}
		},
		mounted() {
			_this = this;
		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style>
	.h50{
		height: 50rpx;
		line-height: 50rpx;
	}
	.status1{
		background-color: #70b603;
		color: #fff;
		padding: 0rpx 10rpx;
		border-radius: 15rpx;
		margin-left: 20rpx;
	}
	.status2{
		background-color: #f59a23;
		color: #fff;
		padding: 0rpx 10rpx;
		border-radius: 15rpx;
		margin-left: 20rpx;
	}
	.i-search{
		background-color: #f8f7f8e6;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
		padding: 0 30rpx;
	}
</style>
